<div>
    <div class="bg-white w-full h-60 flex justify-center items-center" id="personas-title">
        <div class="text-5xl text-center w-1/4">
            People make magic happen with Typeform   
        </div>
    </div>
    <div class="relative flex"> 
        {% for persona in site.data.personas %}
            {% include persona.html 
                title = persona.title
                subTitle = persona.subTitle
                text = persona.text
                p1 = persona.p1
                boldText = persona.boldText
                p2 = persona.p2
                nr = persona.nr
                color = persona.color
                opacity = persona.opacity
                pos = persona.pos
                id = persona.id
                clicked = "hasbeenClicked()"
            %}
        {% endfor %}
    </div>
</div>

<style>
    #personas-title{
        background-color: #f6f1ea;
    }
</style>    

<script>

    let count = 0;
    let personas = ["persona-1", "persona-2", "persona-3"]
    hasbeenClicked = () => {
        if(count > 2){
            count = 0;
        }
        let currentSlide = document.getElementById(personas[count]);
        let nextSlide = document.getElementById(count == 2 ? personas[0] : personas[count + 1]);

        currentSlide.style.cssText = "position: absolute; opacity: 0"
        nextSlide.style.cssText = "position: static; opacity: 1"
        count++;

    }
</script>


